<template>
	<view class="">
		<view class="optional" v-if="optionalList.length">
			<view class="optional__header">
				<view class="header__item">{{$t("stock.name")}}</view>
				<view class="header__item">{{$t("stock.price")}}
				</view>
				<view class="header__item">{{$t("stock.riseFall")}}
				</view>
				<view class="header__item">{{$t('search.del')}}
					<!-- <image src="@/static/icons/delete_icon.png" mode="widthFix" class="item__icon"></image> -->
				</view>
			</view>
			<view class="optional__item" v-for="(item, index) in optionalList" :key="index" @click="itemClick(item)">
				<view class="item__name">
					<view class="name__text">{{item.product.name}}</view>
					<view class="name__info">
						<image v-if="item.product.category_id == 1" src="@/static/icons/KRN.png" mode="widthFix"
							class="info__icon"></image>
						<image v-if="item.product.category_id == 2" src="@/static/icons/US.png" mode="widthFix"   
							class="info__icon"></image>
						<image v-if="item.product.category_id == 3" src="@/static/icons/UK.png" mode="widthFix"
							class="info__icon"></image>
						<text class="info__code">{{item.product.shuzidaima}}</text>
					</view>
				</view>
				<view class="item__price">
					<view class="price__num">{{item.product.price}}</view>
					<text class="price__count" v-if="item.product.open">{{item.product.open}}</text>
				</view>
				<view class="item__increa">
					<view class="increa__num">{{item.product.zhangdiebaifenbi }}</view>
					<view class="increa__tips" v-if="false">
						<text class="tips__num">{{item.product.zhangdieshu}}</text>
						<text class="tips__text">{{$t('stock.beforeOpening')}}</text>
					</view>
				</view>
				<view class="item__delete" @click.stop="deleteClick(item)">
					<image src="@/static/icons/delete_icon.png" mode="widthFix" class="delete__icon"></image>
				</view>
			</view>
		</view>
		<emptyTips v-else></emptyTips>
	</view>
	
</template>

<script>
	import emptyTips from '@/components/common/emptyTips.vue'
	export default{
		components:{
			emptyTips
		},
		data(){
			return {
				navIndex:0, //导航索引
			}
		},
		props:{
			optionalList:{
				type:Array,
				default:()=>([])
			}
		},
		filters:{
			// 格式化百分比
			formatPercent(float){
				let num = float ? float  : 0
				return num.toFixed(2) + "%"
			}
		},
		methods:{
			// 切换价格排序
			changePriceOlder(){
				this.$emit("optionOrderChange", 'zhangdieshu')
			},
			// 涨幅排序
			increaseClick(){
				this.$emit("optionOrderChange", 'zhangdiebaifenbi')
			},
			itemClick(item){
				uni.navigateTo({
					url:`/pages/account/stockDetail?id=${item.pro_id}`
				})
			},
			// 删除点击
			deleteClick(item){
				uni.showModal({
					title:this.$t("modal.title"),
					content:this.$t("modal.tips"),
					success: async({confirm})=> {
						if(confirm){ //确认删除
							uni.showLoading({
								title:this.$t('loading.loading'),
								mask:true
							})
							let res = await this.$api.deleteOptional(item.id)
							uni.hideLoading()
							if(res.code === 1){
								uni.showToast({
									title:this.$t('trade.done'),
									mask:true,
									icon:"success"
								})
								// 更新自选
								this.$emit("updateOptional")
							}else{
								uni.showToast({
									title:res.msg,
									icon:"none"
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.optional{
			margin-top: 24rpx;
			.optional__header{
				@include flexRowAlign(space-between);
				height: 64rpx;
				.header__item{
					@include flexRowAlign(center);
					font-size: 28rpx;
					color: #999999;
					width: 180rpx;
					.item__icon{
						width: 24rpx;
						height: 28rpx;
						margin-left: 4rpx;
					}
					&:first-child{
						justify-content: flex-start;
					}
					&:last-child{
						width: 100rpx;
					}
				}
			}
			.optional__item{
				@include flexRowAlign(space-between);
				height: 136rpx;
				// border-top: 1rpx solid #EEEEEE;
				.item__name{
					@include flexCenter(column);
					align-items: flex-start;
					width: 180rpx;
					.name__text{
						font-size: 28rpx;
						color: #fff;
						height: 72rpx;
						width: 180rpx;
						@include textOver();
					}
					.name__info{
						@include flexRowAlign()
						margin-top: 10rpx;
						.info__tag{
							color: #fff;
							font-size: 24rpx;
							padding: 0 4rpx;
							height: 28rpx;
							background: #DE2804;
							border-radius: 6rpx;
							@include flexCenter();
						}
						.info__tag--US{
							background: #0369F6;
						}
						.info__tag--HK{
							background: #DE2804;
						}
						.info__code{
							color: #fff;
							font-size: 20rpx;
							margin-left: 10rpx;
						}
						.info__icon{
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
							border-radius: 50%;
						}
					}
				}
				.item__price{
					@include flexCenter(column);
					width: 180rpx;
					.price__num{
						font-size: 28rpx;
						font-weight: 800;
						color: #FF3B46;
					}
					.price__count{
						font-size: 24rpx;
						font-weight: 500;
						color: #fff;
					}
				}
				.item__increa{
					@include flexCenter(column);
					width: 180rpx;
					.increa__num{
						min-width: 150rpx;
						height: 48rpx;
						padding: 0 12rpx;
						background: rgba(#FF3B46, 0.5);
						border-radius: 8rpx;
						@include flexCenter(column);
						font-size: 28rpx;
						font-weight: 800;
						color: #FF3B46;
					}
					.increa__tips{
						@include flexRowAlign();
						margin-top: 6rpx;
						.tips__num{
							font-size: 24rpx;
							color: #fff;
						}
						.tips__text{
							min-width: 92rpx;
							height: 30rpx;
							@include flexCenter();
							background: rgba(255, 255, 255, 0.1);
							border-radius: 6rpx;
							font-size: 20rpx;
							color: #fff;
							margin-left: 10rpx;
						}
					}
				}
				.item__delete{
					margin-left: 30rpx;
					margin-right: 20rpx;
					width: 50rpx;
					height: 50rpx;
					background: #cccccc;
					border-radius: 50%;
					@include flexCenter(column);
					border-radius: 50%;
					.delete__icon{
						width: 20rpx;
						height: 24rpx;
					}
				}
			}
		}
</style>